<template>
  <div class="base-info-container">
    <div class="module-title-container">
      <div class="module-title">基本资料</div>
    </div>
    <div class="base-info-wrapper">
      <div class="base-info-image ani-wrapper">
        <img :src="imageUrl" alt="廖耀华" />
      </div>
      <div class="base-info-content">
        <div class="hello ani-wrapper">你好，我是廖耀华</div>
        <div class="desc ani-wrapper">
          <p>我是一名前端开发工程师，对前端领域充满热忱，喜欢用代码创造出有趣又实用的东西。</p>
          <p>在日常工作中，我熟练掌握 HTML、CSS 和 JavaScript，能够打造出用户体验良好的界面。同时，我也熟悉 Vue、React 等主流前端框架，利用它们的特性高效开发项目。</p>
          <p>我享受解决问题的过程，每当通过代码实现一个复杂交互或者优化页面性能时，都会获得满满的成就感。业余时间，我喜欢探索新的前端技术，将它们运用到自己的小项目中，不断学习和成长，期望能用代码给大家带来更多惊喜。</p>
        </div>
        <div class="base-info-item-grid ani-wrapper">
          <div class="base-info-item">
            <div class="base-info-item-title">姓名</div>
            <div class="base-info-item-content">廖耀华</div>
          </div>
          <div class="base-info-item">
            <div class="base-info-item-title">工作经验</div>
            <div class="base-info-item-content">1年</div>
          </div>
          <div class="base-info-item">
            <div class="base-info-item-title">出生年月</div>
            <div class="base-info-item-content">2002年8月11日 （{{ calculateAge('2002-08-11') }}岁）</div>
          </div>
          <div class="base-info-item">
            <div class="base-info-item-title">手机号</div>
            <div class="base-info-item-content">13824365987</div>
          </div>
          <div class="base-info-item">
            <div class="base-info-item-title">邮箱</div>
            <div class="base-info-item-content">1257232723@qq.com</div>
          </div>
          <div class="base-info-item">
            <div class="base-info-item-title">现居地址</div>
            <div class="base-info-item-content">广东省深圳市宝安区</div>
          </div>
          <div class="base-info-item">
            <div class="base-info-item-title">意向岗位</div>
            <div class="base-info-item-content">前端开发工程师</div>
          </div>
          <div class="base-info-item">
            <div class="base-info-item-title">毕业院校</div>
            <div class="base-info-item-content">广东白云学院</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
const imageUrl = 'https://person-web.obs.cn-south-1.myhuaweicloud.com/%E6%88%B4%E5%B8%BD%E5%AD%90%E7%9A%84%E5%BB%96%E8%80%80%E5%8D%8E.jpg'
// 计算年龄的函数
const calculateAge = (birthDate) => {
  const today = new Date();
  const birth = new Date(birthDate);
  let age = today.getFullYear() - birth.getFullYear();
  const monthDiff = today.getMonth() - birth.getMonth();
  if (monthDiff < 0 || (monthDiff === 0 && today.getDate() < birth.getDate())) {
    age--;
  }
  return age;
}

onMounted(() => {
  // 创建Intersection Observer实例
  const observer = new IntersectionObserver(
    (entries) => {
      entries.forEach((entry, index) => {
        if (entry.isIntersecting) {
          // 当元素进入视窗时，添加动画类
          entry.target.classList.add("animate-in");
          entry.target.style.animationDelay = `${index * 1 + 0.4}s`;
        } else {
          // 当元素离开视窗时，移除动画类，以便下次进入时可以再次播放
        //   entry.target.classList.remove("animate-in");
        }
      });
    },
    {
      threshold: 0.1, // 当10%的元素可见时触发
    }
  );

  // 观察所有标题容器
  setTimeout(() => {
    const evaluationContainers = document.querySelectorAll(".ani-wrapper");
    evaluationContainers.forEach((container) => {
      observer.observe(container);
    });
  }, 100); // 延迟100ms确保DOM已完全渲染
});
</script>

<style lang="scss">
.base-info-container {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: auto;
  background-color: #fff;
  padding: 100px 200px;

  .ani-wrapper {
    opacity: 0;
    
    // 当元素进入视窗时添加的动画类
    &.animate-in {
      //   animation: popIn 1s ease-out forwards;
      animation: popIn 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards;

      @keyframes popIn {
        0% {
          transform: scale(0.95) translateY(40px);
          opacity: 0;
        }

        100% {
          transform: scale(1) translateY(0);
          opacity: 1;
        }
      }
    }
  }

  .base-info-wrapper {
    display: flex;
    flex-direction: row;
    width: 100%;
    height: auto;
    gap: 50px;
    margin-top: 50px;

    .hello {
      font-size: 24px;
      font-weight: bold;
      color: #1d2129;
    }

    .desc {
      font-size: 18px;
      font-weight: 400;
      color: #666;
      line-height: 1.5;
    }

    .base-info-image {
      width: 450px;
      height: 600px;
      flex-shrink: 0;
      background-color: #f8f9fa;
      
      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }

    .base-info-content {
      display: flex;
      flex-direction: column;
      width: 100%;
      height: auto;
      gap: 20px;
    }

    .base-info-item-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      width: 100%;
      height: auto;
      gap: 30px 20px;
      margin-top: 40px;
    }

    .base-info-item {
      display: flex;
      flex-direction: column;
      width: 100%;
      height: auto;
      gap: 5px;
    }

    .base-info-item-title {
      font-size: 14px;
      color: #999;
    }

    .base-info-item-content {
      font-size: 18px;
      color: #333;
    }
  }
}
</style>
